<template>
	<view class="container">


		<view class="search-container">
			<input class="search-input" type="text" placeholder="请输入服务内容" style="">
			<uni-icons type="search" size="16" class="searcIcon"></uni-icons>
			</input>


		</view>
		<view class="content">

			<view class="left">

				       <!-- <view v-for="(item,index) in list" :key="index" @click="setClickId(index)"
					:class="{active:index===currentIndex}" class="leftTextItem"> -->
					<view v-for="(item,index) in list" :key="index" @click="setClickId(index)"
						:class="[currentIndex==index?'active':'leftTextItem']" >
					{{item.title}}
				</view>

				     </view>



			 <view class="right">

				 <scroll-view scroll-y :scroll-into-view="clickId" scroll-with-animation @scroll="scroll"
					@scrolltolower="lower">
					     <view v-for="(item1,index1) in list" :key="index1">
						     <view class="goodsTitle" :id="'cur'+index1">{{item1.title}}</view>
						         <!-- <view v-for="(item2,index2) in item1.list" :key="index2">
							<image src="../../../static/icon/icon_yhq.png" style="width: 50px;height: 50px;"></image>
								{{item2}}
						</view> -->
						<view class="twoModeleClass">
							<view v-for="(item2,index2) in item1.list" class="twoModeleItem">
								<image src="../../../static/icon/icon_yhq.png" class="twoModuleIconItem"></image>
								<view>
									<text class="twoModeleTextItem">{{item2}}</text>
								</view>
							</view>

						</view>
					</view>

				</scroll-view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{

						title: "维修",

						list: ["空调", "洗衣机", "浴霸", "电灯"]

					},

					{

						title: "游戏",

						list: ["csgo", "绝地求生", "GTA5", "apex"]

					},

					{

						title: "运动",

						list: ["健身达人", "游泳教练", "瑜伽达人"]

					},

					{

						title: "生活",

						list: ["炸鸡", "烤鸭", "木桶饭", "饺子"]

					}
				],

				clickId: "", // 点击左侧菜单右侧菜单滑动

				currentIndex: 0, // 点击左侧添加样式

				topList: [],




			};
		},
		onReady() {

			this.getNodesInfo();

		},
		onLoad() {

		},
		methods: {
			setClickId(index) {

				this.clickId = "cur" + index;

				this.currentIndex = index;

			},

			scroll(e) {

				// console.log(e);

				let scrollTop = e.target.scrollTop;

				for (let i = 0; i < this.topList.length; i++) {

					let h1 = this.topList[i];

					let h2 = this.topList[i + 1];

					if (scrollTop >= h1 && scrollTop < h2) {

						this.currentIndex = i;

					}

				}

			},

			// 滚动到底部

			lower() {

				setTimeout(() => {

					this.currentIndex = this.topList.length;



				}, 100)

			},

			// 获取节点的scrollTop数组

			getNodesInfo() {

				const query = uni.createSelectorQuery().in(this);

				query.selectAll('.goodsTitle').boundingClientRect().exec(data => {

					// console.log(data);

					let res = data[0];

					let rel = [];

					res.map(item => {

						rel.push(item.top);

					});

					this.topList = rel;

					console.log(this.topList);

				});

			}


		}
	}
</script>


<style lang="scss">
	.container {
		background-color: #FFF;
		padding: 20px;

	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: #FFF;
		padding: 10px;
		border-radius: 5px;

		outline: none;
		opacity: 0.53;
		background: #FFF;
		backdrop-filter: blur(6.849999904632568px);
		margin-top: 30rpx;
	}

	.search-input {
		flex: 1;
		padding: 15rpx;
		position: relative;
		padding-left: 30rpx;


	}

	.search-btn {
		padding: 10px;
		margin-left: 10px;
		background-color: #4caf50;
		color: white;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
	}

	.searcIcon {
		position: absolute;
		left: 10rpx;
	}

	.content {

		display: flex;

		.left {

			width: 100px;



		}

		.right {

			flex: 1;



			scroll-view {

				height: 200px;

				.goodsTitle {

					font-size: 16px;

					font-weight: 600;



				}

			}

		}

	}

	.active {

		border-radius: 12px;
		background: #FF9E44;
		color: #FFF;
		font-size: 40rpx;
		font-style: normal;
		font-weight: 500;
		text-align: center;
	}

	
	.leftTextItem {

		color: #B6B1AC;
		text-align: center;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		
	}

	.twoModeleClass {

		flex-wrap: wrap;
		column-count: 4;
		text-align: center;
		padding: 20rpx;
	}

	.twoModeleItem {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.twoModuleIconItem {
		width: 36px;
		height: 36px;
	}

	.twoModeleTextItem {
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
</style>